/* enum */
import { ComponentNameEnum } from '@src/component/business/BizChatPanel/chat/model/enum'
/* model */
import { OpenAIMessageItemType } from '@src/component/business/BizChatPanel/chat/model'
/* scss */
import '@src/component/business/BizChatPanel/chat/components/message-item-loading/index.scss'
/* vue */
import { defineComponent, PropType } from 'vue'
/* util */
import { getLocalesOssUrl } from '@src/util/assets'

const xiaoBaoIcon = getLocalesOssUrl('xiao-bao-animation.gif')

export type ChatAIMessageItemLoadingProps = {
  item: OpenAIMessageItemType;
}

export interface ChatAIMessageItemLoadingSetupState {
  
}

export enum ChatAIMessageItemLoadingEventEnum {
  Stop = 'stop',
}

export default defineComponent({
  name: ComponentNameEnum.ChatAIMessageItemLoading,
  components: {
  },
  emits: [
    ChatAIMessageItemLoadingEventEnum.Stop,
  ],
  props: {
    item: {
      type: Object as PropType<OpenAIMessageItemType>,
      default: () => ({})
    },
    onStop: {
      type: Function
    }
  },
  setup(props: ChatAIMessageItemLoadingProps, { slots, emit }) {
    
  },
  computed: {
    itemClassNames() {
      return {
        [ComponentNameEnum.ChatAIMessageItemLoading]: true
      }
    }
  },
  methods: {
    emitStop() {
      this.$emit(ChatAIMessageItemLoadingEventEnum.Stop)
    }
  },
  render() {
    return (
      <div class={this.itemClassNames}>
        
        <div class="chat-ai-message-item-loading-block">
          
          <el-image 
            src={xiaoBaoIcon} 
            class="chat-ai-message-item-loading-icon"
          />
          
          <span class="chat-ai-message-item-loading-text">
            正在回答...
          </span>
          
        </div>
        
        <div 
          class="chat-ai-message-item-loading-stop"
          onClick={this.emitStop}
        >
          <i class="iconfont icon-jieshu"></i>
          <span>
            停止回答
          </span>
        </div>
        
      </div>
    ) as any
  }
})
